<template>
  <div class="">
    <h5>详情页</h5>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in imgs" :key="index">
        <img class="swipeimg" :src="item.src" alt="" />
      </van-swipe-item>
    </van-swipe>

    <h5>{{ desc.title }}</h5>
    <div v-html="desc.content"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: this.$route.query.id,
      imgs: [],
      desc: [],
    };
  },
  mounted() {
    this.$axios
      .get("http://www.liulongbin.top:3005/api/getthumimages/" + this.id)
      .then((res) => {
        console.log(res);
        this.imgs = res.data.message;
      });

    this.$axios
      .get("http://www.liulongbin.top:3005/api/goods/getdesc/" + this.id)
      .then((res) => {
        console.log(res);
        this.desc = res.data.message[0];
      });
  },
  methods: {},
  components: {},
};
</script>

<style lang="scss" scoped>
// scoped的意思是当前样式只在当前组件起作用 如果不加 这个样式在所有的组件都会起作用
.swipeimg {
  width: 100%;
  height: 300px;
}
</style>
